<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, shrink-to-fit=no, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
    <link rel="icon" href="./favicon.ico" type="image/x-icon">
    <title>Dandelion Pro - Documentation</title>

    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700" rel="stylesheet">

    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.css" rel="stylesheet">
    
    <!-- Syntax Hightlighter CSS -->
    <link href="css/prism.css" rel="stylesheet">
  
    <!-- Custom CSS -->
    <link href="css/style.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body>
    <div id="wrapper" class="toggled">
        <!-- Sidebar -->
        <div id="sidebar-wrapper">
            <ul class="sidebar-nav">
                <li class="sidebar-brand">
                    <a href="#" class="logo">
                        <img src="images/logo.png" alt="logo" />
                    </a>
                </li>
                <li><h3>Welcome</h3></li>
                <li>
                    <a href="#introduction" class="cur">Introduction</a>
                </li>
                <li>
                    <a href="#what">What is Dandelion Pro?</a>
                </li>
                <li>
                    <a href="#feature">Feature</a>
                </li>
                <li>
                    <a href="#files">Folder Structure</a>
                </li>
                <li><h3>Setup</h3></li>
                <li>
                    <a href="#install">Installation &amp; Running App</a>
                </li>
                <li>
                    <a href="#run">Deployment</a>
                </li>
                <li>
                    <a href="#shoot">Troubleshooting</a>
                </li>
                <li><h3>Start Coding</h3></li>
                <li>
                    <a href="#code_basic">Basic Code Structure</a>
                </li>
                <li>
                    <a href="#starter">Starter Project <span class="badge badge-danger">HOT</span></a>
                </li>
                <li>
                    <a href="#layout">Change Layout and Theme</a>
                </li>
                <li>
                    <a href="#code">Direct Code Preview <span class="badge badge-danger">HOT</span></a>
                </li>
                <li>
                    <a href="#create_page">Create New Page</a>
                </li>
                <li>
                    <a href="#create_component">Create New Component</a>
                </li>
                <li>
                    <a href="#eslint">Clean Code (Eslint)</a>
                </li>
                <li><h3>Additional Info</h3></li>
                <li>
                    <a href="#reference">External Reference</a>
                </li>
                <li>
                    <a href="#font">Fonts and Icons</a>
                </li>
                <li>
                    <a href="#credit">Sources and Credits</a>
                </li>
                <li>
                    <a href="#support">Support</a>
                </li>
                <li>
                    <a href="#log">Change Log</a>
                </li>
            </ul>

            <span class="copy">&copy; Copyright 2019 - Dandelion Pro</span>
        </div>
        <!-- /#sidebar-wrapper -->

        <!-- main content -->
        <div id="page-content-wrapper">
            <div class="container-fluid">

                <!-- INTRODUCTION -->
                <section class="row" id="introduction">
                    <div class="col-lg-12">
                        <h1 class="title">Thank you for Purchasing </h1>
                        <br /><br />
                        <h3>Dandelion Pro - React Admin Dashboard Template</h3>
                        <h4>Version 1.5.0</h4>
                        <hr />
                        <ul>
                            <li>
                                Created : 18 Nov 2018
                            </li>
                            <li>
                                Latest Update : 25 aug 2019
                            </li>
                        </ul>
                    </div>
                </section>
                <!-- END -->

                <!-- WHAT -->
                <section class="row" id="what">
                    <div class="col-lg-10">
                        <h1>What is Dandelion Pro?</h1>
                        <hr />
                        <img src="images/banner.jpg" alt="banner" class="img-thumbnail" />
                        <br /><br />
                        <article>
                            <p>
                                <strong>Dandelion Pro</strong> is admin dashboard template based on <strong>React Boilerplate</strong>. 
                                It provides you clean modern design and high performance react app with various color theme.
                                This template has been built to makes the development process easy and fast for you, which is supported by
                                material-ui v3.x, jss (css in js), immutable js, webpack, npm modern workflow and flexible layout with flexbox.
                            <p>
                                <strong>What's Inside?</strong><br />
                                Dandelion Pro contains more than 40 react components that will meet any needs you may have in your project. 
                                Every components, modules and pages are fully customizable, easy to use and suitable for large scale project.
                            </p>
                        </article>
                    </div>
                </section>
                <!-- END -->

                <!-- FEATURE -->
                <section class="row" id="feature">
                    <div class="col-lg-10">
                        <h1>Template Feature</h1>
                        <hr />
                        <ul class="styled">
                            <li>
                                 <strong>Modern Technologies</strong>. Built with one of most popular javascript library React.JS and Redux
                            </li>
                            <li>
                                <strong>Premium designs</strong>. Simple and elegant style with many variant gradient and flat theme
                            </li>
                            <li>
                                <strong>Multiple layout orientation</strong>. Sidebar Menu and Navigation Menu layout
                            </li>
                            <li>
                                <strong>40+ react components and modules</strong> which reusable and easy to modify
                            </li>
                            <li>
                                <strong>Eyes are more focused</strong>. Come with dark and light mode
                            </li>
                            <li>
                                <strong>Next Generation JavaScript</strong> written in ES6
                            </li>
                            <li>
                                <strong>Responsive design</strong> Based on standard 12 Grid System
                            </li>
                            <li>
                                <strong>High Performance</strong>. Styling with JSS (CSS in JS) and Async Code Splitting
                            </li>
                            <li>
                                <strong>Clean code</strong> maintained by eslint
                            </li>
                            <li>
                                <strong>Fully vector</strong> icons and font icons
                            </li>
                            <li>
                                <strong>Direct code preview</strong>. Get source code easier without open files.
                            </li>
                            <li>
                                And many more...
                            </li>
                        </ul>
                    </div>
                </section>
                <!-- END -->

                <!-- FOLDER STRUCTURE -->
                <section class="row" id="files">
                    <div class="col-lg-10">
                        <h1>Files and Folder Structure</h1>
                        <hr />
                        <pre>
├── app           # main application source code
│   ├── actions   # redux action dispatchers and action types
│   ├── api       # api sample dummy data collection and ui initial value
│   │   ├── apps
│   │   ├── chart
│   │   ├── dummy
│   │   ├── icons
│   │   ├── images
│   │   ├── palette
│   │   └── ui
│   ├── app.js
│   ├── components    # UI Components
│   │   ├── Badges
│   │   ├── BreadCrumb
│   │   ├── Calculator
│   │   ├── Calendar
│   │   ├── CardPaper
│   │   ├── Cart
│   │   ├── Chat
│   │   ├── Comments
│   │   ├── Contact
│   │   ├── Counter
│   │   ├── Divider
│   │   ├── DynamicInvoice
│   │   ├── Email
│   │   ├── Error
│   │   ├── Forms
│   │   ├── Gallery
│   │   ├── GuideSlider
│   │   ├── Header
│   │   ├── ImageLightbox
│   │   ├── LandingPage
│   │   ├── Loading
│   │   ├── Notification
│   │   ├── Pagination
│   │   ├── Panel
│   │   ├── PapperBlock
│   │   ├── Product
│   │   ├── Profile
│   │   ├── Quote
│   │   ├── Rating
│   │   ├── Search
│   │   ├── Sidebar
│   │   ├── SocialMedia
│   │   ├── SourceReader
│   │   ├── Tables
│   │   ├── TaskBoard
│   │   ├── TemplateSettings
│   │   ├── TextEditor
│   │   ├── Widget
│   │   └── index.js
│   ├── config         # enviroment and other global configuration
│   ├── containers     # application wrapper and root template
│   │   ├── App
│   │   ├── Charts
│   │   ├── Dashboard
│   │   ├── Forms
│   │   ├── LandingPage
│   │   ├── LanguageProvider
│   │   ├── Layouts
│   │   ├── Maps
│   │   ├── NotFound
│   │   ├── Pages
│   │   ├── Parent
│   │   ├── Tables
│   │   ├── Templates
│   │   ├── UiElements
│   │   └── pageListAsync.js
│   ├── index.html    # main HTML
│   ├── redux         # redux settings
│   ├── styles        # style declaration witc scss and css
│   └── utils         # redux saga configuration
├── internals         # webpack and app configuration
│   ├── config.js
│   ├── generators
│   ├── mocks
│   ├── scripts
│   ├── testing
│   └── webpack
├── package-lock.json
├── package.json      # npm package manager file 
├── postcss.config.js # css config
├── public            # all public assets directory
│   ├── favicons
│   └── images  
├── server            # backend configuration
│   ├── argv.js
│   ├── index.js
│   ├── logger.js
│   ├── middlewares
│   ├── port.js
│   ├── rawdocs.js
│   └── rawicons.js
└── yarn.lock
                        </pre>
                    </div>
                </section>
                <!-- END -->

                <!-- INSTALL -->
                <section class="row" id="install">
                    <div class="col-lg-10">
                        <h1>Installation and Running App</h1>
                        <hr />
                        Dandelion Pro is built on top of <a href="https://material-ui.com/" target="_blank">Material UI</a>
						<ul>
							<li>Connect to the internet</li>
							<li>Install NodeJs from <a href="https://nodejs.org/en/" target="_blank" rel="noopener noreferrer">NodeJs Official Page</a></li>
							<li>Unzip the Dandelion Pro file to a folder in your computer</li>
							<li>Open Terminal</li>
							<li>Go to your file project (where you've unzipped the product)</li>
							<li>
                                <strong>Install Modules</strong><br />
								Install module dependencies by run this script in terminal
								<pre><code class="language-js">npm install</code></pre>
                                It will download some necessary dependencies, it could take some minutes, just wait until finish.
							</li>
                            <li>
                                <strong>Build Webpack DLL dependencies(If necessary)</strong><br>
								Install module dependencies by run this script in terminal. This process ussualy done by 'npm install', but if system require it just run this command:
								<pre class=" language-js"><code class=" language-js">npm run build<span class="token punctuation">:</span>dll</code></pre>
							</li>
							<li>
                                <strong>Run App</strong><br />
								After build static library, then run the app.
								<pre><code class="language-js">npm start</code></pre>
                                The process should be take about 1-2 minutes.
                                <br />
                                <img src="images/cmd1.png" width="600" alt="process" />
                                <br />
								<em>INFO: <br />
									- Just run this script whenever you want start the project.<br />
									- Run <code>npm install</code> again if you have new module dependencies,<br />
								</em>
							</li>
							<li>Navigate to <a href="http://localhost:3000" target="_blank">http://localhost:3000</a></li>
						</ul>
                    </div>
                </section>
                <!-- END -->
				
				<!-- DEPLOYMENT APP -->
                <section class="row" id="run">
                    <div class="col-lg-10">
                        <h1>Deployment</h1>
                        <hr />
                        <h4>Production</h4>
						<ul>
							<li>
                                First you need to build the production assets first
								<pre><code class="language-js">npm run build</code></pre>
								It usually take longer time than development to generate and compress production code.
								The generated files will be placed in <code>build/</code>
                                <img src="images/cmd2.png" width="800" alt="process" />
                                <img src="images/cmd3.png" width="800" alt="process" />
							</li>
                            <li>
                                Then start the app
								<pre><code class="language-js">npm run start:prod</code></pre>
							</li>
                            <li><strong>-------- OR -------</strong></li>
                            <li>
                              If you want run it in background you may try PM2 <a href="https://www.npmjs.com/package/pm2" target="_blank">https://www.npmjs.com/package/pm2</a>.
                              Then run this command:
                              <pre><code class="language-js">node node_modules/.bin/cross-env NODE_ENV=production pm2 start server</code></pre>
                            </li>
							<li>Then navigate to <a href="http://localhost:3000" target="_blank">http://localhost:3000</a></li>
                            <li><strong>Note:</strong> 
                              After build finish then when you access it on local, all of the assets will be stored in local storage.
                              So when You make a change the result will not update, because browser will take the code from cache.
                              <br />
                              This is a default feature from React Boilerplate which has focus of 'offline first'.
                              So will make easier to build Progressive Web Aplication. But you can clear it by clear in local storage by following this step.
                              <br /><br />
                              <strong>Google Chrome and Opera</strong>
                              <ol>
                                <li>Open "Developer Tools" or Right click > Inspect element</li>
                                <li>Then go to tab "Application"</li>
                                <li>Choose "Clear Storage" in left sidebar</li>
                                <li>Scroll down then You will see button "Clear site data"</li>
                                <li>Just click it to clear all stored assets
                                  <br />
                                  <img src="images/chrome_clear_localstorage.png" width="600" alt="img" />
                                </li>
                              </ol>
                              <br /><br />
                              <strong>Safari and Firefox</strong>
                              <ol>
                                <li>Open "Developer Tools" or Right click > Inspect element</li>
                                <li>Then go to tab "Storage"</li>
                                <li>Choose "Local Storage" in left sidebar</li>
                                <li>Just right click > Delete All
                                  <br />
                                  <img src="images/firefox_clear_localstorage.png" width="600" alt="img" />
                                </li>
                              </ol>
                            </li>
						</ul>
                    </div>
                </section>
                <!-- END -->
              
                <!-- TROUBLESHOOTING APP -->
                <section class="row" id="shoot">
                    <div class="col-lg-10">
                        <h1>Troublehooting</h1>
                        <hr />
                        <h4>Installation Problem</h4>
                        <ul>
                          <li>
                              <em>if got warning like this :</em><br />
                              <pre><code class="language-js">npm WARN redux-immutablejs@0.0.8 requires a peer of immutable@^3.7.5 but none is installed. You must install peer dependencies yourself.
npm WARN react-draft-wysiwyg@1.12.13 requires a peer of immutable@3.x.x || 4.x.x but none is installed. You must install peer dependencies yourself.
npm WARN slick-carousel@1.8.1 requires a peer of jquery@>=1.8.0 but none is installed. You must install peer dependencies yourself.
npm WARN draftjs-utils@0.9.4 requires a peer of immutable@3.x.x || 4.x.x but none is installed. You must install peer dependencies yourself.
npm WARN html-to-draftjs@1.4.0 requires a peer of immutable@3.x.x || 4.x.x but none is installed. You must install peer dependencies yourself.
</code></pre>
                              <strong>Don't worry the app will run as well</strong>
                              <p>For warning some of dependencies need another dependencies too, maybe once you install them, there’s some changes from the 3rd party vendor so probably it will make a warning to another dependencies.</p>
                            </li>
                            <li>
                              <em>if got an error with a dependencies installation</em>. Try to remove the problematic package in
                              <code>package.json</code>. Then install again with <code>npm install</code>. After finish try to
                              install the problematic package manually.
                            </li>
                            <li>
                              if still got an error. Try to update the problematic package instead.
                            </li>
                        </ul>
                        <br />
                        <br />
                        <h4>Development Problem</h4>
                        <p>
                          Every code changes, the app will updated directly without reloading the pages. 
                          when errors happen or warning will show in browser and console browser.
                        </p>
                        <br />
                    </div>
                </section>
                <!-- END -->
              
                <!-- CODE STRUCTURE -->
                <section class="row" id="code_basic">
                    <div class="col-lg-12">
                        <h1>Basic Code Structure</h1>
                        <hr />
                        <h4>Main HTML</h4>
                        <p>The HTML root in <code>/app/index.html</code></p>
                        <img src="images/ss_code.png" width="800" alt="code" />
                        <p>You can put google analytics, font icon, embeded fonts, etc here.</p>
                        <br />
                        <br />
                        <h4>Main JS</h4>
                        <p>The JS root in <code>/app/app.js</code>. This is the entry file for the application, only setup and boilerplate code.</p>
                        <img src="images/ss_code2.png" width="800" alt="code2" />
                        <br />
                        <br />
                        <br />
                        <h4>Directory Alias</h4>
                        <p>You can find directory alias settings in <code>/internals/webpack/webpack.base.babel.js</code></p>
                        <table class="tg">
                          <thead>
                            <tr>
                              <th class="tg-yw4l">Name</th>
                              <th class="tg-yw4l">Alias</th>
                              <th class="tg-yw4l">Directory</th>
                              <th class="tg-yw4l">Sample Use</th>
                            </tr>
                          </thead>
                          <tbody>
                            <tr>
                              <td>UI Components</td>
                              <td><strong>dan-components</strong></td>
                              <td>app/components/</td>
                              <td><code>import { CrudTableForm, Notification } from 'dan-components';</code></td>
                            </tr>
                            <tr>
                              <td>Redux Actions</td>
                              <td><strong>dan-actions</strong></td>
                              <td>app/actions/</td>
                              <td><code>import { closeAllAction } from 'dan-actions/UiActions';</code></td>
                            </tr>
                            <tr>
                              <td>Component Style Overider</td>
                              <td><strong>dan-styles</strong></td>
                              <td>app/styles/components/</td>
                              <td><code>import css from 'dan-styles/Table.scss';</code></td>
                            </tr>
                            <tr>
                              <td>API</td>
                              <td><strong>dan-api</strong></td>
                              <td>app/api/</td>
                              <td><code>import brand from 'dan-api/dummy/brand';</code></td>
                            </tr>
                            <tr>
                              <td>Images</td>
                              <td><strong>dan-images</strong></td>
                              <td>public/images/</td>
                              <td><code>import decorationDark from 'dan-images/decoration_dark.svg';</code></td>
                            </tr>
                            <tr>
                              <td>3rd Party Vendors</td>
                              <td><strong>dan-vendor</strong></td>
                              <td>node_modules/</td>
                              <td><code>import css from 'dan-vendor/react-draft-wysiwyg/dist/react-draft-wysiwyg.css';</code></td>
                            </tr>
                          </tbody>
                        </table>
                        <br />
                        <br />
                        <br />
                        <h4>Template Architecture</h4>
                        <p>
                          This is template architecture in diagram visuailzation. Click diagram or full screen button <img src="" alt="full screen" />
                          to show in new tab with full screen
                      </p>
                        <iframe frameborder="0" style="width:100%;height:580px;" src="architecture.html"></iframe>
                    </div>
                </section>
                <!-- END -->
              
              <!-- STARTER PROJECT -->
                <section class="row" id="starter">
                    <div class="col-lg-10">
                        <h1>Starter Project</h1>
                        <hr />
                        This source code made for you who want build app from scratch without without being distracted from innate feature.
                        In other word it's an initial(empty) project with built in configuration setup.
                        <br /><br />
                        <ul>
                          <li>You can go through to <code>starter-project/</code> folder</li>
                          <li>Connect to the internet</li>
                          <li>Open Terminal</li>
                          <li>The next installation process are same like was described above</li>
                          <li>
                              Install module dependencies by run this script in terminal
                              <pre><code class="language-js">npm install</code></pre>
                              It will download some necessary dependencies, it could take some minutes, just wait until finish.
                          </li>
                          <li>
                                <strong>Build Webpack DLL dependencies(If necessary)</strong><br>
								Install module dependencies by run this script in terminal. This process ussualy done by 'npm install', but if system require it just run this command:
								<pre class=" language-js"><code class=" language-js">npm run build<span class="token punctuation">:</span>dll</code></pre>
							</li>
                          <li>
                              <strong>Run App</strong><br>
                              After build static library, then run the app.
                              <pre class=" language-js"><code class=" language-js">npm start</code></pre>
                              <br>
                              <img src="images/cmd1.png" width="600" alt="process">
                              <br>
                              <em>INFO: <br>
                                  - Just run this script whenever you want start the project.<br>
                                  - Run <code>npm install</code> again if you have new module dependencies,<br>
                              </em>
                          </li>
                          <li>Navigate to <a href="http://localhost:3001" target="_blank">http://localhost:3001</a></li>
                          <li>After this you can can start develop your app with this initial project. And will bo more suitable when use dandelion-pro as a reference</li>
                        </ul>
                    </div>
                </section>
                <!-- END -->
              
              <!-- Layout -->
                <section class="row" id="layout">
                    <div class="col-lg-10">
                        <h1>Change Layout and Theme</h1>
                        <hr />
                        <img src="images/guide_theme.gif" alt="theme" />
                        <br />
                        This app has <strong>15 Themes with dark/light</strong> appearance and 4 layouts mode base on navigation menu (<strong>Left Sidebar, Right Sidebar, Top Dropdown Menu and Mega menu).</strong>
                        You can change the layout via theme panel but not permanently. To make the layout permanent just follow this step. <br /> <br />
                        <ul>
                          <li>Open <code>app/redux/modules/ui.js</code></li>
                          <li>
                            Then change the <code>initialState</code> value. Here's the available api:
                            <table class="tg">
                              <tbody>
                                <tr>
                                  <th class="tg-yw4l">Key</th>
                                  <th class="tg-yw4l">Type</th>
                                  <th class="tg-yw4l">Available Value</th>
                                  <th class="tg-yw4l">Example</th>
                                </tr>
                                <tr>
                                  <td class="tg-yw4l"><code>theme:</code></td>
                                  <td valign="top">String</td>
                                  <td>
                                    <code>'greenOrangeTheme'</code>,
                                    <code>'purpleRedTheme'</code>,  <br />
                                    <code>'skyBlueTheme'</code>,
                                    <code>'magentaTheme'</code>,  <br />
                                    <code>'purpleTheme'</code>,
                                    <code>'pinkGreenTheme'</code>,
                                    <code>'orangeTheme'</code>, <br />
                                    <code>'yellowCyanTheme'</code>,
                                    <code>'blueCyanTheme'</code>,
                                    <code>'blueTheme'</code>, <br />
                                    <code>'yellowBlueTheme'</code>,
                                    <code>'cyanTheme'</code>,
                                    <code>'redTheme'</code>, <br />
                                    <code>'greyTheme'</code>
                                  </td>
                                  <td valign="top"><code>theme: 'pinkGreenTheme'</code></td>
                                </tr>
                                <tr>
                                  <td class="tg-yw4l"><code>type:</code></td>
                                  <td valign="top">String</td>
                                  <td>
                                    <code>'light'</code>,
                                    <code>'dark'</code>,
                                  </td>
                                  <td valign="top"><code>type: 'dark'</code></td>
                                </tr>
                                <tr>
                                  <td class="tg-yw4l"><code>gradient:</code></td>
                                  <td valign="top">Boolean</td>
                                  <td>
                                    <code>true</code>,
                                    <code>false</code>,
                                  </td>
                                  <td valign="top"><code>gradient: true</code></td>
                                </tr>
                                <tr>
                                  <td class="tg-yw4l"><code>decoration:</code></td>
                                  <td valign="top">Boolean</td>
                                  <td>
                                    <code>true</code>,
                                    <code>false</code>,
                                  </td>
                                  <td valign="top"><code>decoration: true</code></td>
                                </tr>
                                <tr>
                                  <td class="tg-yw4l"><code>bgPosition:</code></td>
                                  <td valign="top">String</td>
                                  <td>
                                    <code>'half'</code>,
                                    <code>'full'</code>,
                                    <code>'header'</code>,
                                  </td>
                                  <td valign="top"><code>bgPosition: 'half</code></td>
                                </tr>
                                <tr>
                                  <td class="tg-yw4l"><code>layout:</code></td>
                                  <td valign="top">String</td>
                                  <td>
                                    <code>'left-sidebar'</code>,
                                    <code>'right-sidebar'</code>,
                                    <code>'top-navigation'</code>,
                                    <code>'mega-menu'</code>,
                                  </td>
                                  <td valign="top"><code>layout: 'left-sidebar</code></td>
                                </tr>
                              </tbody>
                            </table>
                            <br />
                            <strong>Here's the complete code</strong>
                                <pre><code class="language-js">// file: app/redux/modules/ui.js

const initialState = {
  /* Settings for Themes and layout */
  theme: 'pinkGreenTheme',
  type: 'light', // light or dark
  gradient: true, // true or false
  decoration: true, // true or false
  bgPosition: 'half', // half, header, full
  layout: 'left-sidebar', // left-sidebar, right-sidebar, top-navigation, mega-menu
  /* End settings */
  sidebarOpen: true,
  pageLoaded: false,
  palette: List([
    { name: 'Fruit', value: 'greenOrangeTheme' },
    { name: 'Purple', value: 'purpleRedTheme' },
    { name: 'Ocean Sky', value: 'skyBlueTheme' },
    { name: 'Rose Gold', value: 'magentaTheme' },
    { name: 'Ultra Violet', value: 'purpleTheme' },
    { name: 'Botani', value: 'pinkGreenTheme' },
    { name: 'Ubuntu', value: 'orangeTheme' },
    { name: 'Patriot', value: 'brownTheme' },
    { name: 'Vintage', value: 'yellowCyanTheme' },
    { name: 'Mint', value: 'blueCyanTheme' },
    { name: 'Deep Ocean', value: 'blueTheme' },
    { name: 'School', value: 'yellowBlueTheme' },
    { name: 'Leaf', value: 'cyanTheme' },
    { name: 'Metal Red', value: 'redTheme' },
    { name: 'Grey', value: 'greyTheme' },
  ]),
  subMenuOpen: []
};
</code></pre>
                          </li>
                        </ul>
                      <br /><br />
                      <h4>UI Redux Architecture</h4>
                        <p>
                          This is UI architecture in diagram visuailzation. Click diagram or full screen button <img src="" alt="full screen" />
                          to show in new tab with full screen
                      </p>
                        <iframe frameborder="0" style="width:100%;height:360px;" src="ui_architecture.html"></iframe>
                    </div>
                </section>
                <!-- END -->
				
				
				<!-- CODE -->
                <section class="row" id="code">
                    <div class="col-lg-12">
                        <h1>Enable Direct Code Preview</h1>
                        <hr />
                        To make documenation easy and effective to access and implement, we attached source code in every component demos.
                        We call it Direct Code Preview. This feature can be used in purchased product only (not available in demo).
                        <br /><br />
                        <ul>
                          <li>Open config file <code>app/config/codePreview.js</code></li>
                          <li>By default it set by false <pre><code class="language-js">// file: app/config/codePreview.js

export default {
  enable: false
};
</code></pre></li>
                          <li>Change to <code>enable: true</code>, to enabled direct code preview</li>
                          <li>
                            Test with any component demo, example in <a href="http://localhost:3000/app/tables/advanced-table" target="_blank">http://localhost:3000/app/tables/advanced-table</a>.
                          </li>
                          <li>
                            Then at the bottom of every components you will see <strong>&lt;&gt; Show Code</strong> Button. Just click it.
                          </li>
                          <li>
                            The source code of that components will show as well.
                            <br /><br />
                            <img src="images/guide_code.gif" alt="theme" />
                            <br /><br />
                            <em>np: Basically this feature read source file directly, 
                            so for every changes you make in component will also changes that preview.</em>
                            <br />
                          </li>
                          <li>You can see through, copy and paste directly any component in front of your eyes.</li>
                          <li>
                            This feature use <strong>Source Reader</strong> component.
                            You can find it in <code>src/app/components/SourceReader/SourceReader.js</code>.
                            It was implemented in mostly component demos. 
                          </li>
                        </ul>
                    </div>
                </section>
                <!-- END -->
              
              <!-- CREATE PAGE -->
                <section class="row" id="create_page">
                    <div class="col-lg-12">
                        <h1>Create New Page</h1>
                        <hr />
                        <ul>
                            <li>Go to <code>app/containers/</code></li>
                            <li>Create new folder ex: <b>MyPage</b>. <em>The name must in capitalize</em></li>
                            <li>Create new js file inside that folder <b>MyPage</b>, ex <code>SamplePage.js</code>. <em>The name must in capitalize</em></li>
                            <li>
                              Inside the file create a simple page HTML ex: <br />
                              <pre><code class="language-js">// file: app/containers/MyPage/SamplePage.js

import React from 'react';
import { Helmet } from 'react-helmet';
import { PapperBlock } from 'dan-components';

class SamplePage extends React.Component {
  render() {
    const title = 'Dandelion Pro. Blank Page';
    const description = 'Dandelion Pro';
    return (
      &lt;div&gt;
        &lt;Helmet&gt;
          &lt;title&gt;{title}&lt;/title&gt;
          &lt;meta name="description" content={description} /&gt;
          &lt;meta property="og:title" content={title} /&gt;
          &lt;meta property="og:description" content={description} /&gt;
          &lt;meta property="twitter:title" content={title} /&gt;
          &lt;meta property="twitter:description" content={description} /&gt;
        &lt;/Helmet&gt;
        &lt;PapperBlock title="Blank Page" desc="Some text description"&gt;
          Content
        &lt;/PapperBlock&gt;
      &lt;/div&gt;
    );
  }
}

export default SamplePage;

</code></pre>
                            </li>
                          <li>
                            Import it asynchronously to the routing. Open file <code>app/containers/pageListAsync.js</code>
                                <pre><code class="language-js">// app/containers/pageListAsync.js

export const SamplePage = Loadable({
  loader: () => import('./MyPage/SamplePage'),
  loading: Loading,
});</code></pre>
                              </li>
                              <li>
                                Load it inside the template. In this example we'll use in dashboard template. Open file <code>app/containers/App/Application.js</code>
                                <pre><code class="language-js">// file: app/containers/App/Application.js

import { SamplePage } from '../pageListAsync';
class Application extends React.Component {
  render() {
    const { changeMode } = this.props;
    return (
      &lt;Dashboard history={this.props.history} changeMode={changeMode}&gt;
        &lt;Switch&gt;
          &lt;Route exact path="/sample-page" component={SamplePage} /&gt;
        &lt;/Switch&gt;
      &lt;/Dashboard&gt;
    )
  }
}</code></pre>
                              </li>
                              <li>Then you can access it at <a href="http://localhost:3000/mypage/sample-page">http://localhost:3000/mypage/sample-page</a></li>
                              <li>Also you can put the a usual link inside &lt;a /&gt; or material button. <a href="http://localhost:3000/app/forms/buttons" target="_blank">See this documentation</a></li>
                            </ul>
                        <br />
                        <br />
                    </div>
                  <br /><br />
                  <h4>Routing Architecture</h4>
                        <p>
                          This is Routing architecture in diagram visuailzation. Click diagram or full screen button <img src="" alt="full screen" />
                          to show in new tab with full screen
                      </p>
                        <iframe frameborder="0" style="width:100%;height:560px;" src="routing_architecture.html"></iframe>
                </section>
                <!-- END -->
              
				<!-- CREATE COMPONENT -->
                <section class="row" id="create_component">
                    <div class="col-lg-12">
                        <h1>Create New Component</h1>
                        <hr />
                        <ul>
                          <li>Go to <code>app/components/</code></li>
                          <li>Create new folder ex: <b>MyComponent</b>. <em>The name must in capitalize</em></li>
                          <li>Create new js file inside that folder <b>MyComponent</b>, ex <code>SampleComponent.js</code>. <em>The name must in capitalize</em></li>
                          <li>
                              Inside the file create a simple ES6 Class ex: <br />
                              <pre><code class="language-js">// file: app/components/MyComponent/SampleComponent.js

import React from 'react';

class SampleComponent extends React.Component {
  render() {
    return (
      &lt;H1&gt;Hello World&lt;/H1&gt;
    );
  }
}

export default SampleComponent;

</code></pre>
                            </li>
                            <li>Register it to index. Open file <code>app/components/index.js</code></li>
                            <li>
                              Import that component<br />
                              <pre><code class="language-js">
// file: app/components/index.js

import SampleComponent from './MyComponent/SampleComponent';
                              </code></pre>
                            </li>
                            <li>Open a <b>target page</b> where you want use it. Ex: Open <code>src/app/MyPage/SamplePage</code>. <em>(Example page that we've made in previous section)</em></li>
                            <li>
                              Import component form component library<br />
                              <pre><code class="language-js">import { SampleComponent } from 'dan-components;</code></pre>
                            </li>
                            <li>
                              Then use it inside render function<br />
                              <pre><code class="language-js">render() {
  return (
    &lt;SampleComponent /&gt;
  );
}
                            </code></pre>
                                </li>
                                <li>
                                  Here's complete code <br />
                                  <pre><code class="language-js">// file: app/containers/MyPage/SamplePage.js

import React from 'react';
import { Helmet } from 'react-helmet';
import { PapperBlock, SampleComponent } from 'dan-components';

class SamplePage extends React.Component {
  render() {
    const title = 'Dandelion Pro. Blank Page';
    const description = 'Dandelion Pro';
    return (
      &lt;div&gt;
        &lt;Helmet&gt;
          &lt;title&gt;{title}&lt;/title&gt;
          &lt;meta name="description" content={description} /&gt;
          &lt;meta property="og:title" content={title} /&gt;
          &lt;meta property="og:description" content={description} /&gt;
          &lt;meta property="twitter:title" content={title} /&gt;
          &lt;meta property="twitter:description" content={description} /&gt;
        &lt;/Helmet&gt;
        &lt;PapperBlock title="Blank Page" desc="Some text description"&gt;
          &lt;SampleComponent /&gt;
        &lt;/PapperBlock&gt;
      &lt;/div&gt;
    );
  }
}

export default SamplePage;

</code></pre>
                                </li>
                                <li>Then you can check the result at <a href="http://localhost:3000/mypage/sample-page">http://localhost:3000/mypage/sample-page</a></li>
                        </ul>
                    </div>
                </section>
                <!-- END -->
                              
                <!-- ESLINT -->
                <section class="row" id="eslint">
                    <div class="col-lg-10">
                        <h1>Clean Code with Eslint</h1>
                        <hr>
                        Eslint is disabled by default. You can enable it to keep your code consistent and avoiding bug. <br>
                        <strong><em>NOTE: By enable eslint the running app process at beginning will slower.</em></strong><br><br>
                        Just follow this step to enable eslint<br>
                        <ul>
                          <li>Go to <code>internals/webpack/webpack.base.babel.js</code></li>
                          <li>
                            Just uncomment this code bellow
                            <pre class=" language-js"><code class=" language-js">module<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>
      <span class="token comment">/*
        Disabled eslint by default.
        You can enable it to maintain and keep clean your code.
        NOTE: By enable eslint running app process at beginning will slower
      */</span>
      <span class="token comment">//      {</span>
      <span class="token comment">//        enforce: 'pre',</span>
      <span class="token comment">//        test: /\.js?$/,</span>
      <span class="token comment">//        exclude: [/node_modules/],</span>
      <span class="token comment">//        loader: 'eslint-loader',</span>
      <span class="token comment">//        options: {</span>
      <span class="token comment">//          quiet: true,</span>
      <span class="token comment">//        }</span>
      <span class="token comment">//      },</span>
      <span class="token punctuation">{</span></code></pre>
                          </li>
                          <li>
                            Then should become like this
                            <pre class=" language-js"><code class=" language-js">module<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>
      <span class="token comment">/*
        Disabled eslint by default.
        You can enable it to maintain and keep clean your code.
        NOTE: By enable eslint running app process at beginning will slower
      */</span>
      <span class="token punctuation">{</span>
        enforce<span class="token punctuation">:</span> <span class="token string">'pre'</span><span class="token punctuation">,</span>
        test<span class="token punctuation">:</span> <span class="token regex">/\.js?$/</span><span class="token punctuation">,</span>
        exclude<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token regex">/node_modules/</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
        loader<span class="token punctuation">:</span> <span class="token string">'eslint-loader'</span><span class="token punctuation">,</span>
        options<span class="token punctuation">:</span> <span class="token punctuation">{</span>
          quiet<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span></code></pre>
                          </li>
                          <li>
                            Run the project <code>npm start</code>.<br>
                            You will be notified with an error message if your code not clean or consistent.
                            ESLint itself is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code, with the goal of making code more consistent and avoiding bugs.<br>
                            More about elint <a href="https://eslint.org/docs/user-guide/getting-started" target="_blank">https://eslint.org/docs/user-guide/getting-started</a>
                          </li>
                        </ul>
                    </div>
                </section>
                <!-- END -->
              
                <!-- FONTS -->
                <section id="reference">
                    <h1>External Reference</h1>
                    <p>Here's some external reference of library that we used</p> <br />
                    <ul>
                      <li>
                        <strong>React Boilerplate</strong>
                        <a href="https://material-ui.com/">https://material-ui.com/</a>
                      </li>
                      <li>
                        <strong>Material UI</strong>
                        <a href="https://www.reactboilerplate.com/">https://www.reactboilerplate.com/</a>
                      </li>
                      <li>
                        <strong>JSS (CSS in JS)</strong>
                        <a href="https://cssinjs.org/">https://cssinjs.org/</a>
                      </li>
                      <li>
                        <strong>Immutable JS</strong>
                        <a href="https://facebook.github.io/immutable-js/">https://facebook.github.io/immutable-js/</a>
                      </li>
                      <li>And many more. Check the all dependencies and the repository <a href="#credit">here</a></li>
                    </ul>
                </section>
                <!-- END -->
                
                <!-- ICONS -->
                 <!-- FONTS -->
                <section id="font">
                    <h1>Fonts Used</h1>
                    <div class="row">
                        <div class="col-lg-4">
                            <img src="images/font.png" style="margin-top: 100px" width="100%" alt="roboto font" />
                        </div>
                        <div class="col-lg-8">
                            <hr /><br /><br />
                            <img src="images/fonts.jpg" width="400" alt="roboto font" />
                            <br /><br />
                            <p>
                              <strong>Usage: </strong> &nbsp; Checkout example usage in 
                              <a href="http://localhost:3000/app/ui/typography" >Ui Elements &rsaquo; Typography</a>
                            </p>
                        </div>
                    </div>
                </section>
                <!-- END -->
                <section class="row" id="icon">
                    <div class="col-lg-12">
                        <h1>Icons Used</h1>
                        <hr />
                        To use icon, it has two method<br /><br />
                        <h4>Material Font Icons</h4>
                        <ul>
                          <li>
                            Please make sure Google Material Icons already embeded in <code>app/index.html</code>.
                            <br />
                            If not just embed this inside head tag
                            <pre><code class="language-markup">&lt;head&gt;
      &lt;link href=&quot;https://fonts.googleapis.com/icon?family=Material+Icons&quot; rel=&quot;stylesheet&quot; /&gt;
&lt;/head&gt;</code></pre>
                          </li>
                          <li>
                            Connect to internet
                          </li>
                          <li>
                            Import Material UI Icon to your component
                            <pre><code class="language-js">import Icon from '@material-ui/core/Icon';</code></pre>
                          </li>
                          <li>
                            Then add it inside render method. Example for use <code>access_time</code> icon
                            <pre><code class="language-markup">&lt;Icon&gt;access_time&lt;Icon /&gt;</code></pre>
                          </li>
                        </ul>
                        <br /><br /><br />
                        <h4>Material SVG Icons</h4>
                        It's interesting to have the building blocks needed to implement custom icons. This template use NPM package, @material-ui/icons, that includes the 900+ official Material icons converted to SvgIcon components.
                        <br /><br />
                        <ul>
                          <li>
                            Import all necessary icons form Material UI Icons library
                            <pre><code class="language-js">import AccessTime from '@material-ui/icons/AccessTime';
import Adjust from '@material-ui/icons/Adjust';
import BatteryStd from '@material-ui/icons/BatteryStd';
                            </code></pre>
                          </li>
                          <li>
                            Use them as component in render method
                            <pre><code class="language-js"> render() {
  return (
    &lt;div&gt;
      &lt;AccessTime /&gt;
      &lt;Adjust /&gt;
      &lt;BatteryStd /&gt;
    &lt;div /&gt;
  );
}
                            </code></pre>
                          </li>
                        </ul>
                        <br /><br /><br />
                        <h4>Ionicon SVG</h4>
                        Premium designed icons for use in web, iOS, Android, and desktop apps. 
                        <br /><br />
                        <ul>
                          <li>
                            Import all necessary icons form Material UI Icons library
                            <pre><code class="language-js">import Ionicon from 'react-ionicons'
                            </code></pre>
                          </li>
                          <li>
                            Use them as component in render method
                            <pre><code class="language-js"> render() {
  return (
    &lt;div&gt;
      &lt;Ionicon icon=&quot;ios-add-circle&quot; fontSize=&quot;35px&quot; onClick={() =&gt; console.log('Hi!')} color=&quot;red&quot;/&gt;
      &lt;Ionicon icon=&quot;ios-alert&quot; rotate={true} fontSize=&quot;35px&quot; color=&quot;blue&quot;/&gt;
      &lt;Ionicon icon=&quot;ios-analytics-outline&quot; fontSize=&quot;35px&quot; color=&quot;#C9C9C9&quot;/&gt;
      &lt;Ionicon icon=&quot;md-basket&quot; fontSize=&quot;35px&quot; color=&quot;rgb(125, 176, 24)&quot;/&gt;
      &lt;Ionicon icon=&quot;md-calculator&quot; rotate={true} fontSize=&quot;35px&quot; color=&quot;rgb(125, 176, 24)&quot;/&gt;
    &lt;div /&gt;
  );
}
                            </code></pre>
                          </li>
                        </ul>
                        <br /><br /><br />
                        <h4>Icons Source</h4>
                        <ul>
                          <li>
                            You can explore more than 1600 material and ion icons at <a href="http://localhost:3000/app/ui/icons" target="_blank">UI Element &rsaquo; Icons</a>
                            and <a href="http://localhost:3000/app/ui/icons" target="_blank">UI Element &rsaquo; Ionicons</a>
                            <br />
                            <br />
                            <img src="images/icons.png" width="600" alt="icon list" />
                          </li>
                          <li>
                            And click one of icon, then the guide detail of using the icon will show
                            <br /> <br />
                            <img src="images/detail_icon.png" width="600" alt="icon list" />
                          </li>
                        </ul>
                        
                        <br /><br />
                        Or from original source <a href="https://material.io/icons/" target="_blank">Google Material Icons</a>
                        and <a href="https://ionicframework.com/docs/ionicons/" target="_blank">Ion Icons</a>
                    </div>
                </section>
                <!-- END -->
              
                <!-- CREDIT -->
                <section class="row" id="credit">
                    <div class="col-lg-12">
                        <hr />
                        <br />
                        <h1>Sources and Credit</h1>
                        <hr />
                        <article>
                            <strong>Fonts :</strong><br/>
                            Open Sans<br /><br />
                            <strong>Preview Images Used</strong> 
                            <br />
                            <a href="http://unsplash.com/" target="_blank">Unsplash</a><br />
                            <a href="https://pixabay.com/" target="_blank">Pixabay</a><br />
                            <a href="https://randomuser.me//" target="_blank">randomuser.me</a><br /><br />
                            <blockquote>Note: All images are just used for Preview Purpose Only. They are not part of the template and NOT included in the final purchase files.</blockquote>
                            <br /><br />
                            <strong>Credits</strong>
                            <br />
                            <table class="tg">
                              <tr>
                                <th class="tg-yw4l">Name</th>
                                <th class="tg-yw4l">Repository</th>
                                <th class="tg-yw4l">License</th>
                              </tr>
                              <tr>
                                <td class="tg-yw4l">@babel.js</td>
                                <td class="tg-yw4l">https://github.com/babel/babel</td>
                                <td class="tg-yw4l">MIT</td>
                              </tr>
                              <tr>
                                <td class="tg-yw4l">@material-ui</td>
                                <td class="tg-yw4l">https://github.com/mui-org/material-ui</td>
                                <td class="tg-yw4l">MIT</td>
                              </tr>
                              <tr>
                                <td class="tg-yw4l">axios</td>
                                <td class="tg-yw4l">https://github.com/axios/axios</td>
                                <td class="tg-yw4l">MIT</td>
                              </tr>
                              <tr>
                                <td class="tg-yw4l">classnames</td>
                                <td class="tg-yw4l">https://github.com/JedWatson/classnames</td>
                                <td class="tg-yw4l">MIT</td>
                              </tr>
                              <tr>
                                <td class="tg-yw4l">draft-js</td>
                                <td class="tg-yw4l">https://github.com/facebook/draft-js</td>
                                <td class="tg-yw4l">BSD Licensed.</td>
                              </tr>
                              <tr>
                                <td class="tg-yw4l">express</td>
                                <td class="tg-yw4l">https://github.com/expressjs/express</td>
                                <td class="tg-yw4l">MIT</td>
                              </tr>
                              <tr>
                                <td class="tg-yw4l">history</td>
                                <td class="tg-yw4l">https://github.com/ReactTraining/history</td>
                                <td class="tg-yw4l">MIT</td>
                              </tr>
                              <tr>
                                <td class="tg-yw4l">immutable</td>
                                <td class="tg-yw4l">https://github.com/facebook/immutable-js</td>
                                <td class="tg-yw4l">MIT</td>
                              </tr>
                              <tr>
                                <td class="tg-yw4l">lodash</td>
                                <td class="tg-yw4l">https://github.com/lodash/lodash</td>
                                <td class="tg-yw4l">MIT</td>
                              </tr>
                              <tr>
                                <td class="tg-yw4l">material-ui-pickers</td>
                                <td class="tg-yw4l">https://github.com/dmtrKovalenko/material-ui-pickers</td>
                                <td class="tg-yw4l">MIT</td>
                              </tr>
                              <tr>
                                <td class="tg-yw4l">moment</td>
                                <td class="tg-yw4l">https://github.com/moment/moment</td>
                                <td class="tg-yw4l">MIT</td>
                              </tr>
                              <tr>
                                <td class="tg-yw4l">mui-datatables</td>
                                <td class="tg-yw4l">https://github.com/gregnb/mui-datatables</td>
                                <td class="tg-yw4l">MIT</td>
                              </tr>
                              <tr>
                                <td class="tg-yw4l">prop-types</td>
                                <td class="tg-yw4l">https://github.com/facebook/prop-types</td>
                                <td class="tg-yw4l">MIT</td>
                              </tr>
                              <tr>
                                <td class="tg-yw4l">react</td>
                                <td class="tg-yw4l">https://github.com/facebook/react</td>
                                <td class="tg-yw4l">MIT</td>
                              </tr>
                              <tr>
                                <td class="tg-yw4l">react-animated-slider</td>
                                <td class="tg-yw4l">https://github.com/erichbehrens/react-animated-slider</td>
                                <td class="tg-yw4l">MIT</td>
                              </tr>
                              <tr>
                                <td class="tg-yw4l">react-autosuggest</td>
                                <td class="tg-yw4l">https://github.com/moroshko/react-autosuggest</td>
                                <td class="tg-yw4l">MIT</td>
                              </tr>
                              <tr>
                                <td class="tg-yw4l">react-big-calendar</td>
                                <td class="tg-yw4l">https://github.com/intljusticemission/react-big-calendar</td>
                                <td class="tg-yw4l">MIT</td>
                              </tr>
                              <tr>
                                <td class="tg-yw4l">react-chartjs-2</td>
                                <td class="tg-yw4l">https://github.com/reactjs/react-chartjs</td>
                                <td class="tg-yw4l">MIT</td>
                              </tr>
                              
                              <tr>
                                <td class="tg-yw4l">react-countup</td>
                                <td class="tg-yw4l">https://github.com/glennreyes/react-countup</td>
                                <td class="tg-yw4l">MIT</td>
                              </tr>
                              <tr>
                                <td class="tg-yw4l">react-dropzone</td>
                                <td class="tg-yw4l">https://github.com/react-dropzone/react-dropzone</td>
                                <td class="tg-yw4l">MIT</td>
                              </tr>
                              <tr>
                                <td class="tg-yw4l">react-google-maps</td>
                                <td class="tg-yw4l">https://github.com/tomchentw/react-google-maps</td>
                                <td class="tg-yw4l">MIT</td>
                              </tr>
                              <tr>
                                <td class="tg-yw4l">react-helmet</td>
                                <td class="tg-yw4l">https://github.com/nfl/react-helmet</td>
                                <td class="tg-yw4l">MIT</td>
                              </tr>
                              <tr>
                                <td class="tg-yw4l">react-hot-loader</td>
                                <td class="tg-yw4l">https://github.com/gaearon/react-hot-loader</td>
                                <td class="tg-yw4l">MIT</td>
                              </tr>
                              <tr>
                                <td class="tg-yw4l">react-input-range</td>
                                <td class="tg-yw4l">https://github.com/davidchin/react-input-range</td>
                                <td class="tg-yw4l">MIT</td>
                              </tr>
                              <tr>
                                <td class="tg-yw4l">react-ionicons</td>
                                <td class="tg-yw4l">https://zamarrowski.github.io/react-ionicons/</td>
                                <td class="tg-yw4l">MIT</td>
                              </tr>
                              <tr>
                                <td class="tg-yw4l">react-loading-bar</td>
                                <td class="tg-yw4l">https://github.com/mironov/react-redux-loading-bar</td>
                                <td class="tg-yw4l">MIT</td>
                              </tr>
                              <tr>
                                <td class="tg-yw4l">react-markdown</td>
                                <td class="tg-yw4l">https://github.com/rexxars/react-markdown</td>
                                <td class="tg-yw4l">MIT</td>
                              </tr>
                              <tr>
                                <td class="tg-yw4l">react-redux</td>
                                <td class="tg-yw4l">https://github.com/reduxjs/react-redux</td>
                                <td class="tg-yw4l">MIT</td>
                              </tr>
                              <tr>
                                <td class="tg-yw4l">react-slick</td>
                                <td class="tg-yw4l">https://github.com/akiran/react-slick</td>
                                <td class="tg-yw4l">MIT</td>
                              </tr>
                              <tr>
                                <td class="tg-yw4l">react-syntax-highlighter</td>
                                <td class="tg-yw4l">https://github.com/conorhastings/react-syntax-highlighter</td>
                                <td class="tg-yw4l">MIT</td>
                              </tr>
                              <tr>
                                <td class="tg-yw4l">react-trello</td>
                                <td class="tg-yw4l">https://github.com/rcdexta/react-trello</td>
                                <td class="tg-yw4l">MIT</td>
                              </tr>
                              <tr>
                                <td class="tg-yw4l">react-ultimate-pagination</td>
                                <td class="tg-yw4l">https://github.com/ultimate-pagination/react-ultimate-pagination</td>
                                <td class="tg-yw4l">MIT</td>
                              </tr>
                              <tr>
                                <td class="tg-yw4l">recharts</td>
                                <td class="tg-yw4l">https://github.com/recharts/recharts</td>
                                <td class="tg-yw4l">MIT</td>
                              </tr>
                              <tr>
                                <td class="tg-yw4l">redux</td>
                                <td class="tg-yw4l">https://github.com/reduxjs/redux</td>
                                <td class="tg-yw4l">MIT</td>
                              </tr>
                              <tr>
                                <td class="tg-yw4l">redux-form</td>
                                <td class="tg-yw4l">https://github.com/erikras/redux-form-material-ui</td>
                                <td class="tg-yw4l">MIT</td>
                              </tr>
                              <tr>
                                <td class="tg-yw4l">slick-carousel</td>
                                <td class="tg-yw4l">https://github.com/akiran/react-slick</td>
                                <td class="tg-yw4l">MIT</td>
                              </tr>
                              <tr>
                                <td class="tg-yw4l">typeface-roboto</td>
                                <td class="tg-yw4l">https://github.com/KyleAMathews/typefaces/tree/master/packages/roboto</td>
                                <td class="tg-yw4l">MIT</td>
                              </tr>
                            </table>
                        </article>
                    </div>
                </section>
                <!-- END -->

                <!-- SUPPORT -->
                <section class="row" id="support">
                    <div class="col-lg-10">
                        <h1>Online Suport</h1>
                        <hr />
                        <p>
                             If you have any questions about customization of this template wich are not covered in the documentation feel free to ask a question in the comment section or contact me directly via e-mail form on my profile page.
                        </p>
                        <p>
                            A product by <a href="https://themeforest.net/user/ilhammeidi" target="_blank">Ilham Meidi Brata</a>
                        </p>
                        <br /><br />
                        <blockquote>
                            <h4>Enjoy and don’t forget to rate my template. <br /> <br /> Thank you very much!</h4>
                        </blockquote>
                    </div>
                </section>
                <!-- END -->

                <!-- Log -->
                <section class="row" id="log">
                    <div class="col-lg-10">
                        <h1>Change Log</h1>
                        <hr />
                      <table class="table table-striped log">
                            <thead>
                              <tr>
                                <th>
                                    <strong>Version 1.5.0 – 25 Aug, 2019</strong>
                                </th>
                              </tr>
                            </thead>
                            <tbody>
                                <tr>
                                  <td>
                                      Feature: Support for RTL layout
                                  </td>
                                </tr>
                                <tr>
                                  <td>
                                      Feature: Add new variant sidebar, Big Sidebar
                                  </td>
                                </tr>
                                <tr>
                                  <td>
                                      Feature: Add FAQ section in Pricing page
                                  </td>
                                </tr>
                                <tr>
                                  <td>
                                      Chore: Update to Material UI version 4.3
                                  </td>
                                </tr>
                                <tr>
                                  <td>
                                      Fixed: Webpack dependencies bundler warning 
                                  </td>
                                </tr>
                            </tbody>
                        </table>
                      <table class="table table-striped log">
                            <thead>
                              <tr>
                                <th>
                                    <strong>Version 1.4.0 – 20 May, 2019</strong>
                                </th>
                              </tr>
                            </thead>
                            <tbody>
                                <tr>
                                  <td>
                                      Feature: Add 10+ stunning email templates
                                  </td>
                                </tr>
                                <tr>
                                  <td>
                                      Chore: Update React Boilerplate to version 4.0
                                  </td>
                                </tr>
                                <tr>
                                  <td>
                                      Fixed: Multi level menu spacing in sidebar
                                  </td>
                                </tr>
                                <tr>
                                  <td>
                                      Fixed: Blank space in landing page on large screen view (min-width: 1400px)
                                  </td>
                                </tr>
                            </tbody>
                        </table>
                      <table class="table table-striped log">
                            <thead>
                              <tr>
                                <th>
                                    <strong>Version 1.3.2 – 9 Mar, 2019</strong>
                                </th>
                              </tr>
                            </thead>
                            <tbody>
                                <tr>
                                  <td>
                                      Feature: Optimized scrolling page speed. Now smoother and faster
                                  </td>
                                </tr>
                                <tr>
                                  <td>
                                      Feature: Improved search result for ui components and pages
                                  </td>
                                </tr>
                                <tr>
                                  <td>
                                      Fixed: Ui issues for calculator widget, clock widget and contact
                                  </td>
                                </tr>
                                <tr>
                                  <td>
                                      Fixed: Wrong way route for pages has reducer state in production build
                                  </td>
                                </tr>
                                <tr>
                                  <td>
                                      UI Improvement: Change alignment text to left for avatar on collpased menu
                                  </td>
                                </tr>
                                <tr>
                                  <td>
                                      Docs: Add starting point for template diagram flow
                                  </td>
                                </tr>
                            </tbody>
                        </table>
                        <table class="table table-striped log">
                            <thead>
                              <tr>
                                <th>
                                    <strong>Version 1.3.1 – 4 Feb, 2019</strong>
                                </th>
                              </tr>
                            </thead>
                            <tbody>
                                <tr>
                                  <td>
                                      UI Improvement: Landing Page, Calendar App, and Settings
                                  </td>
                                </tr>
                                <tr>
                                  <td>
                                      Fixed: Textfield icon alignment
                                  </td>
                                </tr>
                                <tr>
                                  <td>
                                      Fixed: Search input on focus UI issue
                                  </td>
                                </tr>
                                <tr>
                                  <td>
                                      Fixed: Sidebar menu spacing in Creative Landing Page
                                  </td>
                                </tr>
                            </tbody>
                        </table>
                        <table class="table table-striped log">
                            <thead>
                              <tr>
                                <th>
                                    <strong>Version 1.3 – 27 Jan, 2019</strong>
                                </th>
                              </tr>
                            </thead>
                            <tbody>
                                <tr>
                                  <td>
                                      Feature: Widget Collections
                                  </td>
                                </tr>
                                <tr>
                                  <td>
                                      Redesign: Setting Page
                                  </td>
                                </tr>
                                <tr>
                                  <td>
                                      Redesign: Checkout Page
                                  </td>
                                </tr>
                                <tr>
                                  <td>
                                      Chore: Update material-ui to version 3.9.0
                                  </td>
                                </tr>
                                <tr>
                                  <td>
                                      Chore: Update recharts to version 1.4.2
                                  </td>
                                </tr>
                                <tr>
                                  <td>
                                      Chore: Update react-dropzone to version 4.3.0
                                  </td>
                                </tr>
                                <tr>
                                  <td>
                                      Docs: Add project hierarchy diagram (HOC, Routing, Redux, Designs and Themes)
                                  </td>
                                </tr>
                            </tbody>
                        </table>
                        <table class="table table-striped log">
                            <thead>
                              <tr>
                                <th>
                                    <strong>Version 1.2.1 – 29 Dec, 2018</strong>
                                </th>
                              </tr>
                            </thead>
                            <tbody>
                                <tr>
                                  <td>
                                      Fixed: Error libpng issue during installation on windows 10
                                  </td>
                                </tr>
                                <tr>
                                  <td>
                                      Fixed: Missing gradient background in Microsoft Edge
                                  </td>
                                </tr>
                            </tbody>
                        </table>
                        <table class="table table-striped log">
                            <thead>
                              <tr>
                                <th>
                                    <strong>Version 1.2 – 18 Dec, 2018</strong>
                                </th>
                              </tr>
                            </thead>
                            <tbody>
                                <tr>
                                  <td>
                                      Chore: Refactor code base on eslint rules.
                                  </td>
                                </tr>
                                <tr>
                                  <td>
                                      Fixed: Unreadable API for Icons and Code preview.
                                  </td>
                                </tr>
                                <tr>
                                  <td>
                                      UI Improvement: Add new themes Joker, Queen, and Sultan.
                                  </td>
                                </tr>
                                <tr>
                                  <td>
                                      UI Improvement: Change School theme color and rename some themes.
                                  </td>
                                </tr>
                                <tr>
                                  <td>
                                      Feature: Add random theme option.
                                  </td>
                                </tr>
                            </tbody>
                        </table>
                        <table class="table table-striped log">
                            <thead>
                              <tr>
                                <th>
                                    <strong>Version 1.1 – 10 Dec, 2018</strong>
                                </th>
                              </tr>
                            </thead>
                            <tbody>
                                <tr>
                                  <td>
                                      Chore: Update React Boilerplate to 3.7.0
                                  </td>
                                </tr>
                                <tr>
                                  <td>
                                      Feature: More sample pages in starter-project (Dashboard, Form, and Table)
                                  </td>
                                </tr>
                                <tr>
                                  <td>
                                      Feature: Custom cell components for MUI-Datatables
                                  </td>
                                </tr>
                                <tr>
                                  <td>
                                      Feature: Added home link in every logo
                                  </td>
                                </tr>
                                <tr>
                                  <td>
                                      Feature: Added badges in sidebar
                                  </td>
                                </tr>
                                <tr>
                                  <td>
                                      Fixed: Contact layout in Creative Landing Page
                                  </td>
                                </tr>
                                <tr>
                                  <td>
                                      Fixed: Uncomplete page title if title too long
                                  </td>
                                </tr>
                                <tr>
                                  <td>
                                      UI Changes: Changed color for School Theme
                                  </td>
                                </tr>
                                <tr>
                                  <td>
                                      UI Changes: Changed title color for Background header mode
                                  </td>
                                </tr>
                                <tr>
                                  <td>
                                      UI Changes: Now sidebar has standard scrollbar design in all operating system ui
                                  </td>
                                </tr>
                                <tr>
                                  <td>
                                      UI Changes: Changed text and re-arrange menu
                                  </td>
                                </tr>
                            </tbody>
                        </table>
                        <table class="table table-striped log">
                            <thead>
                              <tr>
                                <th>
                                    <strong>Version 1.0.1 – 25 Nov, 2018</strong>
                                </th>
                              </tr>
                            </thead>
                            <tbody>
                                <tr>
                                  <td>
                                      Chore: Update Material UI Picker to 2.0.2
                                  </td>
                                </tr>
                                <tr>
                                  <td>
                                      Fix: Background color in Wysiwyg dark mode menu
                                  </td>
                                </tr>
                                <tr>
                                  <td>
                                      Fix: Not working animation of Slider widget title
                                  </td>
                                </tr>
                                <tr>
                                  <td>
                                      Fix: Footer position in Blog Article
                                  </td>
                                </tr>
                                <tr>
                                  <td>
                                      Docs: Add external reference link
                                  </td>
                                </tr>
                            </tbody>
                        </table>
                        <table class="table table-striped log">
                            <thead>
                              <tr>
                                <th>
                                    <strong>Version 1.0 – 18 Nov, 2018</strong>
                                </th>
                              </tr>
                            </thead>
                            <tbody>
                                <tr>
                                  <td>
                                      Dandelion Pro released
                                  </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </section>
            </div>
        </div>
        <!-- END -->

    </div>
    <!-- /#wrapper -->

    <!-- jQuery -->
    <script src="js/jquery.js"></script>
  
    <!-- Syntax Highligher -->
    <script src="js/prism.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.bundle.js"></script>

    <!-- Jquery scrollTo -->
    <script src="js/jquery.nav.js"></script>

    <!-- Menu Toggle Script -->
    <script>
        $(document).ready(function() {
        	$('#sidebar-wrapper .sidebar-nav').onePageNav();
        });
    </script>

</body>

</html>
